<script>
import { ref } from 'vue';

export default {
  setup() {
    const carouselItems = ref([
      { id: 1, title: '第一张图片', imageUrl: '/src/assets/img/banner1.jpg' },
      { id: 2, title: '第二张图片', imageUrl: '/src/assets/img/banner2.jpg' },
      { id: 3, title: '第三张图片', imageUrl: '/src/assets/img/banner3.jpg' },
      { id: 4, title: '第4张图片', imageUrl: '/src/assets/img/banner4.jpg' },
    ]);

    return {
      carouselItems
    };
  }
};
</script>

<template>
  <div class="block">
    <el-carousel height="485px">
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
<!--        <h3 class="small">{{ item.title }}</h3>-->
        <img :src="item.imageUrl" :alt="item.title">
      </el-carousel-item>
    </el-carousel>
  </div>
</template>


<style>

.el-carousel-item img {
  width: 100%; /* 使图片宽度占满轮播图的宽度 */
  height: 100%; /* 使图片高度占满轮播图的高度 */
  object-fit: cover; /* 使图片覆盖整个轮播图区域，可能会裁剪图片 */
}


.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;

}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

